// 源插件
import React, { Fragment, PureComponent } from 'react';
import {
  DateDiff,
  DateStamp,
  FormatnumberZero,
  Mover,
  NumberDivide,
  getNowFormatDate,
} from '@/function.js';

// 视图插件
import {
  Button,
  Card,
  Checkbox,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  message,
  notification,
  Row,
  Switch,
  Collapse,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import _indexOf from 'lodash/indexOf';
import _cloneDeep from 'lodash/cloneDeep';
import _pull from 'lodash/pull';
import styles from '../NewTwoPosition/All.less';
import stylesF from './F.less';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';

// css OR less预编译器

// 图片

const { Panel } = Collapse;
const customPanelStyle = {
  backgroundColor: 'rgba(0,0,0,0)',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
};
/**
 *  Describe:数据连接
 */

@connect(({ slpandect }) => ({
  slpandect,
}))
@Form.create()
class SLPandect extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceLong: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceShortBp: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceShortSc: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceAllPositionLong: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceAllPositionShort: {
      data: [],
      total: [],
      code: 0,
    },
    optionColumns: [
      {
        title: '期权代码',
        dataIndex: 'optionCode',
        type: 'string',
        width: 110,
        search: true,
      },
      {
        title: '股票代码',
        dataIndex: 'myCode',
        type: 'string',
        width: 110,
        search: true,
      },
      {
        title: '银行',
        dataIndex: 'bank',
        type: 'string',
        filters: [
          {
            text: '瑞银',
            value: 1,
          },
          {
            text: '花旗',
            value: 2,
          },
        ],
        render: (value, row, index) => {
          let res = '';
          if (value === 1) {
            res = '瑞银';
          }
          if (value === 2) {
            res = '花旗';
          }
          return <span>{res}</span>;
        },
      },
      {
        title: '类型',
        dataIndex: 'optionType',
        type: 'string',
        filters: [
          {
            text: 'SP',
            value: 1,
          },
          {
            text: 'SC',
            value: 2,
          },
          {
            text: 'BP',
            value: 3,
          },
          {
            text: 'BC',
            value: 4,
          },
        ],
        render: (value, row, index) => {
          let res = '';
          if (value === 1) {
            res = 'SP';
          }
          if (value === 2) {
            res = 'SC';
          }
          if (value === 3) {
            res = 'BP';
          }
          if (value === 4) {
            res = 'BC';
          }
          return <span>{res}</span>;
        },
      },
      {
        title: '买入日期',
        dataIndex: 'buyDate',
        width: 110,
        type: 'date',
        sorter: true,
        render: (value, row, index) => {
          return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
        },
      },
      {
        title: '有效期',
        dataIndex: 'expiry',
        width: 110,
        type: 'date',
        sorter: true,
        render: (value, row, index) => {
          return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
        },
      },
      {
        title: '昨收',
        dataIndex: 'lastClose',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '收盘价',
        dataIndex: 'close',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '盈利',
        dataIndex: 'profit',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '今日盈利',
        dataIndex: 'todayProfit',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '数量',
        dataIndex: 'optionCount',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '成本价',
        dataIndex: 'premium',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '行权价',
        dataIndex: 'strikePrice',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '收盘价',
        dataIndex: 'close',
        width: 75,
        type: 'number',
        sorter: true,
      },
      {
        title: '敞口',
        dataIndex: 'positionSize',
        width: 75,
        type: 'number',
        sorter: true,
      },
    ],
    stockColumns: [
      {
        title: '股票代码',
        dataIndex: 'mystock',
        type: 'string',
        width: 110,
        search: true,
        sorter: true,
      },
      {
        title: '涨跌幅',
        dataIndex: 'gain',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span style={{ color: value > 0 ? '#389e0d' : '#e1111e' }}>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value, 2, '%')
                : null}
            </span>
          );
        },
      },
      {
        title: '涨跌幅/BETA',
        dataIndex: 'gainbeta',
        type: 'number',
        width: 90,
        sorter: true,
        //     render: (value, row, index) => {
        //       return (
        //         <span>
        //   {typeof value === 'number' || typeof value === 'string'
        //     ? FormatnumberZero(value, 2).toString()
        //     : null}
        // </span>
        //       );
        //     },
      },
      {
        title: '盈利百分比',
        dataIndex: 'incomepercent',
        width: 90,
        sorter: true,
        type: 'number',
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value, 2, '%')
                : null}
            </span>
          );
        },
      },
      {
        title: '前一日放量系数',
        dataIndex: 'x1',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(FormatnumberZero(value, 4).toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '日均50放量系数',
        dataIndex: 'x2',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(FormatnumberZero(value, 4).toString())
                : null}
            </span>
          );
        },
        className: styles.newFunction,
      },
      {
        title: 'ATR',
        dataIndex: 'atr',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(FormatnumberZero(value, 2).toString())
                : null}
            </span>
          );
        },
        className: styles.newFunction,
      },
      {
        title: '股票敞口%',
        dataIndex: 'stockopen',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? `${NumberDivide(
                    mathService
                      .mul(value, 100)
                      .toFixed(2)
                      .toString()
                  )}%`
                : null}
            </span>
          );
        },
      },
      {
        title: '市值',
        dataIndex: 'costmoney',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '成本价',
        width: 80,
        type: 'number',
        dataIndex: 'costprice',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '最新价',
        width: 80,
        type: 'number',
        dataIndex: 'stockprice',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '持仓股数',
        dataIndex: 'stocknumber',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: 'AQ',
        dataIndex: 'aqnum',
        width: 80,
        type: 'number',
        sorter: true,
      },

      {
        title: 'DQ',
        dataIndex: 'dqnum',
        width: 80,
        type: 'number',
        sorter: true,
      },
      {
        title: '实值SP',
        dataIndex: 'realSp',
        width: 80,
        type: 'number',
        sorter: true,
      },
      {
        title: '实值SC',
        dataIndex: 'realSc',
        width: 80,
        type: 'number',
        sorter: true,
      },

      //   {
      //     title: 'dq两倍执行',
      //     dataIndex: 'dqDoubleStrike',
      //     width: 80,
      //     type:'number',
      //     sorter: true,
      //     render: (value, row, index) => {
      //       return (
      //         <span>
      //   {typeof value === 'number' || typeof value === 'string'
      //     ? NumberDivide(value.toString())
      //     : null}
      // </span>
      //       );
      //     },
      //   },
      //   {
      //     title: 'SellCall数量',
      //     dataIndex: 'scNumber',
      //     width: 90,
      //     type:'number',
      //     sorter: true,
      //     render: (value, row, index) => {
      //       return (
      //         <span>
      //   {typeof value === 'number' || typeof value === 'string'
      //     ? NumberDivide(value.toString())
      //     : null}
      // </span>
      //       );
      //     },
      //   },
      {
        title: '剩余市值/(万)',
        dataIndex: 'lastMarketValue',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' ? NumberDivide(mathService.div(value, 10000), 2) : null}
            </span>
          );
        },
      },

      {
        title: '剩余数量',
        dataIndex: 'lastNum',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '当日盈亏',
        dataIndex: 'thisincome',
        width: 100,
        type: 'number',
        sorter: true,
        render: (tags, record) => {
          if (record.mystock === '股票合计') {
            return (
              <span>
                {typeof tags === 'number' || typeof tags === 'string'
                  ? `${NumberDivide(tags.toString())}/${(
                      (tags / (record.costmoney - tags)) *
                      100
                    ).toFixed(2)}%`
                  : null}
                {}
              </span>
            );
          }
          return (
            <span>
              {typeof tags === 'number' || typeof tags === 'string'
                ? NumberDivide(tags.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '剩余数量当日盈亏',
        dataIndex: 'lastNumThisIncome',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '盈亏金额',
        dataIndex: 'allincome',
        width: 100,
        sorter: true,
        type: 'number',
        render: (value, row, index) => {
          return (
            <span>
              {typeof value === 'number' || typeof value === 'string'
                ? NumberDivide(value.toString())
                : null}
            </span>
          );
        },
      },
      {
        title: '同行',
        dataIndex: 'industryinfolist',
        width: 120,
        type: 'string',
        render: (value, row, index) => {
          if (value !== null && typeof value === 'object') {
            const arr = [];
            for (let i = 0; i < value.length; i++) {
              arr[i] = (
                <div>
                  {`${value[i].stock} (`}
                  <span style={{ color: value[i].gain > 0 ? '#389e0d' : '#e1111e' }}>
                    {`${value[i].gain}%`}
                  </span>
                  )
                </div>
              );
            }
            return <div>{arr}</div>;
          }
          return null;
        },
      },
    ],
    checkboxOption: [
      '期权代码',
      '股票代码',
      '银行',
      '类型',
      '买入日期',
      '有效期',
      '昨收',
      '盈利',
      '今日盈利',
      '数量',
      '成本价',
      '行权价',
      '收盘价',
      '敞口',
    ],
    checkboxOptionAll: [
      '期权代码',
      '股票代码',
      '银行',
      '类型',
      '买入日期',
      '有效期',
      '昨收',
      '收盘价',
      '盈利',
      '今日盈利',
      '数量',
      '成本价',
      '行权价',
      '敞口',

      '买入日期',
    ],
    checkboxStock: [
      '股票代码',
      '涨跌幅',
      '涨跌幅/BETA',
      '盈利百分比',
      '前一日放量系数',
      'ATR',
      '股票敞口%',
      '市值',
      '成本价',
      '最新价',
      '持仓股数',
      'AQ',
      'DQ',
      '实值SP',
      '实值SC',
      '剩余数量',
      '当日盈亏',
      '剩余数量当日盈亏',
      '盈亏金额',
      '同行',
      '剩余市值/(万)',
    ],
    checkboxStockAll: [
      '股票代码',
      '涨跌幅',
      '涨跌幅/BETA',
      '盈利百分比',
      '前一日放量系数',
      'ATR',
      '股票敞口%',
      '市值',
      '成本价',
      '最新价',
      '持仓股数',
      'AQ',
      'DQ',
      '实值SP',
      '实值SC',
      '剩余数量',
      '当日盈亏',
      '剩余数量当日盈亏',
      '盈亏金额',
      '同行',
      '剩余市值/(万)',
    ],
    checkBoxOption: [],
    checkBoxStock: [],
    exposureTable: null,
  };

  optionCheck(param) {
    const that = this;
    const { checkboxOption } = this.state;
    if (_indexOf(checkboxOption, param) !== -1) {
      that.setState(
        {
          checkboxOption: _pull(checkboxOption, param),
          dataSourceLong: {
            ...that.state.dataSourceLong,
            code: 0,
          },
          dataSourceShortBp: {
            ...that.state.dataSourceShortBp,
            code: 0,
          },
          dataSourceShortSc: {
            ...that.state.dataSourceShortSc,
            code: 0,
          },
        },
        () => {
          const { optionColumns } = this.state;
          let columns = _cloneDeep(optionColumns);
          for (let i = 0; i < columns.length; i++) {
            const item = columns[i];
            if (_indexOf(checkboxOption, item.title) === -1) {
              columns.splice(i, 1);
              i--;
            }
          }
          that.setState({
            dataSourceLong: that.dataSourceChangeOptionCheck(
              that.state.dataSourceLong.data,
              that.state.dataSourceLong.title,
              columns
            ),
            dataSourceShortBp: that.dataSourceChangeOptionCheck(
              that.state.dataSourceShortBp.data,
              that.state.dataSourceShortBp.title,
              columns
            ),
            dataSourceShortSc: that.dataSourceChangeOptionCheck(
              that.state.dataSourceShortSc.data,
              that.state.dataSourceShortSc.title,
              columns
            ),
          });
        }
      );
    } else {
      checkboxOption.push(param);
      that.setState(
        {
          checkboxOption,
          dataSourceLong: {
            ...that.state.dataSourceLong,
            code: 0,
          },
          dataSourceShortBp: {
            ...that.state.dataSourceShortBp,
            code: 0,
          },
          dataSourceShortSc: {
            ...that.state.dataSourceShortSc,
            code: 0,
          },
        },
        () => {
          const { optionColumns } = this.state;
          let columns = _cloneDeep(optionColumns);
          for (let i = 0; i < columns.length; i++) {
            const item = columns[i];
            if (_indexOf(checkboxOption, item.title) === -1) {
              columns.splice(i, 1);
              i--;
            }
          }
          that.setState({
            dataSourceLong: that.dataSourceChangeOptionCheck(
              that.state.dataSourceLong.data,
              that.state.dataSourceLong.title,
              columns
            ),
            dataSourceShortBp: that.dataSourceChangeOptionCheck(
              that.state.dataSourceShortBp.data,
              that.state.dataSourceShortBp.title,
              columns
            ),
            dataSourceShortSc: that.dataSourceChangeOptionCheck(
              that.state.dataSourceShortSc.data,
              that.state.dataSourceShortSc.title,
              columns
            ),
          });
        }
      );
    }
  }

  dataSourceChangeOptionCheck(data, title, columns) {
    data.splice(0, 1);
    return {
      title: title,
      code: 1,
      data: data,
      total: ['profit', 'todayProfit', 'positionSize'],
      columns,
    };
  }

  stockCheck(param) {
    const that = this;
    const { checkboxStock } = this.state;
    if (_indexOf(checkboxStock, param) !== -1) {
      that.setState(
        {
          checkboxStock: _pull(checkboxStock, param),
          dataSourceAllPositionLong: {
            ...that.state.dataSourceAllPositionLong,
            code: 0,
          },
          dataSourceAllPositionShort: {
            ...that.state.dataSourceAllPositionShort,
            code: 0,
          },
        },
        () => {
          const { stockColumns } = this.state;
          let columns = _cloneDeep(stockColumns);
          for (let i = 0; i < columns.length; i++) {
            const item = columns[i];
            if (_indexOf(checkboxStock, item.title) === -1) {
              columns.splice(i, 1);
              i--;
            }
          }
          that.setState({
            dataSourceAllPositionLong: that.dataSourceChangeStockCheck(
              that.state.dataSourceAllPositionLong.data,
              that.state.dataSourceAllPositionLong.title,
              columns
            ),
            dataSourceAllPositionShort: that.dataSourceChangeStockCheck(
              that.state.dataSourceAllPositionShort.data,
              that.state.dataSourceAllPositionShort.title,
              columns
            ),
          });
        }
      );
    } else {
      checkboxStock.push(param);
      that.setState(
        {
          checkboxStock,
          dataSourceAllPositionLong: {
            ...that.state.dataSourceAllPositionLong,
            code: 0,
          },
          dataSourceAllPositionShort: {
            ...that.state.dataSourceAllPositionShort,
            code: 0,
          },
        },
        () => {
          const { stockColumns } = this.state;
          let columns = _cloneDeep(stockColumns);
          for (let i = 0; i < columns.length; i++) {
            const item = columns[i];
            if (_indexOf(checkboxStock, item.title) === -1) {
              columns.splice(i, 1);
              i--;
            }
          }
          that.setState({
            dataSourceAllPositionLong: that.dataSourceChangeStockCheck(
              that.state.dataSourceAllPositionLong.data,
              that.state.dataSourceAllPositionLong.title,
              columns
            ),
            dataSourceAllPositionShort: that.dataSourceChangeStockCheck(
              that.state.dataSourceAllPositionShort.data,
              that.state.dataSourceAllPositionShort.title,
              columns
            ),
          });
        }
      );
    }
  }

  dataSourceChangeStockCheck(data, title, columns) {
    data.splice(0, 1);
    return {
      title: title,
      code: 1,
      data: data,
      total: ['costmoney', 'thisincome', 'allincome', 'lastNumThisIncome'],
      columns,
    };
  }

  render() {
    const {
      exposureTable,
      checkBoxStock,
      checkBoxOption,
      dataSourceAllPositionShort,
      dataSourceAllPositionLong,
      dataSourceLong,
      dataSourceShortBp,
      dataSourceShortSc,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          {exposureTable ? (
            <table border="true" style={{ width: '100%' }} className={stylesF.tableUse}>
              <tbody>
                <tr>
                  <td
                    style={{ textAlign: 'center' }}
                    colSpan="2"
                    rowSpan="1"
                    className={stylesF.red}
                  >
                    多头
                  </td>
                  <td
                    style={{ textAlign: 'center' }}
                    colSpan="2"
                    rowSpan="1"
                    className={stylesF.green}
                  >
                    空头
                  </td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    多头股票市值
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.stockLong, 10000), 2, ' 万')}
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    空头股票市值
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.stockShort, 10000), 2, ' 万')}
                  </td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    多头价内sell put
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.sellPutLong, 10000), 2, ' 万')}
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    空头价内sell call
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.sellCallShort, 10000), 2, ' 万')}
                  </td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    多头AQ敞口
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.aqLong, 10000), 2, ' 万')}
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    空头DQ敞口
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.dqShort, 10000), 2, ' 万')}
                  </td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    空头buy put
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.buyPutShort, 10000), 2, ' 万')}
                  </td>
                </tr>
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    多头合计
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.longExposure, 10000), 2, ' 万')}
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    空头合计
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.shortExposure, 10000), 2, ' 万')}
                  </td>
                </tr>
                {/*<tr>*/}
                {/*  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">{' '}</td>*/}
                {/*  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">{' '}</td>*/}
                {/*  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">{' '}</td>*/}
                {/*  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">{' '}</td>*/}
                {/*</tr>*/}
                <tr>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {' '}
                    净敞口
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1">
                    {NumberDivide(mathService.div(exposureTable.netExposure, 10000), 2, ' 万')}
                  </td>
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                  <td style={{ textAlign: 'center' }} colSpan="1" rowSpan="1" />
                </tr>
              </tbody>
            </table>
          ) : null}

          <br />
          <br />
          <Collapse bordered={false} defaultActiveKey={[]}>
            <Panel header="股票筛选" key="1" style={customPanelStyle}>
              {checkBoxStock}
            </Panel>
          </Collapse>
          <StandardTablePro dataSource={dataSourceAllPositionLong} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceAllPositionShort} />
          <br />
          <br />
          <Collapse bordered={false} defaultActiveKey={[]}>
            <Panel header="期权筛选" key="1" style={customPanelStyle}>
              {checkBoxOption}
            </Panel>
          </Collapse>
          <StandardTablePro dataSource={dataSourceLong} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceShortBp} />
          <br />
          <br />
          <StandardTablePro dataSource={dataSourceShortSc} />
          <br />
        </Card>
      </PageHeaderWrapper>
    );
  }

  checkBoxInit(checkboxAll, checkbox, type) {
    let checkBox = [];
    for (let i = 0; i < checkboxAll.length; i++) {
      const item = checkboxAll[i];
      if (_indexOf(checkbox, item) !== -1) {
        checkBox.push(
          <Checkbox
            onChange={
              type === 'option'
                ? this.optionCheck.bind(this, item)
                : this.stockCheck.bind(this, item)
            }
            className={styles['ant-checkbox-wrapper']}
            defaultChecked
          >
            {item}
          </Checkbox>
        );
      } else {
        checkBox.push(
          <Checkbox
            onChange={
              type === 'option'
                ? this.optionCheck.bind(this, item)
                : this.stockCheck.bind(this, item)
            }
            className={styles['ant-checkbox-wrapper']}
          >
            {item}
          </Checkbox>
        );
      }
    }
    return checkBox;
  }

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    const { optionColumns, stockColumns, checkboxOption, checkboxStock } = this.state;

    dispatch({
      type: 'slpandect/GetExposureTable',
      callback: res => {
        const data = res.list;
        that.setState({
          exposureTable: data,
        });
      },
    });

    let sColumns = _cloneDeep(stockColumns);
    for (let i = 0; i < sColumns.length; i++) {
      const item = sColumns[i];
      if (_indexOf(checkboxStock, item.title) === -1) {
        sColumns.splice(i, 1);
        i--;
      }
    }
    dispatch({
      type: 'slpandect/GetStockAllPositionLong',
      callback: res => {
        const data = res.list;
        that.setState({
          dataSourceAllPositionLong: {
            title: '多头股票',
            code: 1,
            data: data,
            total: ['costmoney', 'thisincome', 'allincome', 'lastNumThisIncome'],
            columns: sColumns,
          },
        });
      },
    });
    dispatch({
      type: 'slpandect/GetStockAllPositionShort',
      callback: res => {
        const data = res.list;
        that.setState({
          dataSourceAllPositionShort: {
            title: '空头股票',
            code: 1,
            data: data,
            total: ['costmoney', 'thisincome', 'allincome', 'lastNumThisIncome'],
            columns: sColumns,
          },
        });
      },
    });

    let oColumns = _cloneDeep(optionColumns);
    for (let i = 0; i < oColumns.length; i++) {
      const item = oColumns[i];
      if (_indexOf(checkboxOption, item.title) === -1) {
        oColumns.splice(i, 1);
        i--;
      }
    }
    dispatch({
      type: 'slpandect/GetOptionLong',
      callback: res => {
        const data = res.list;
        that.setState({
          dataSourceLong: {
            title: '多头期权',
            code: 1,
            data: data,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: oColumns,
          },
        });
      },
    });
    dispatch({
      type: 'slpandect/GetOptionShortBp',
      callback: res => {
        const data = res.list;
        that.setState({
          dataSourceShortBp: {
            title: '空头期权Bp',
            code: 1,
            data: data,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: oColumns,
          },
        });
      },
    });
    dispatch({
      type: 'slpandect/GetOptionShortSc',
      callback: res => {
        const data = res.list;
        that.setState({
          dataSourceShortSc: {
            title: '空头期权Sc',
            code: 1,
            data: data,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: oColumns,
          },
        });
      },
    });
  }

  componentDidMount() {
    const { checkboxOptionAll, checkboxOption, checkboxStockAll, checkboxStock } = this.state;
    this.setState({
      checkBoxOption: this.checkBoxInit(checkboxOptionAll, checkboxOption, 'option'),
      checkBoxStock: this.checkBoxInit(checkboxStockAll, checkboxStock, 'stock'),
    });

    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default SLPandect;
